<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>添加订单</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-page-header
          style="background-color: #0096dc;color: white;line-height: 60px"
          @back="goBack()" content="添加订单"></el-page-header>
  <el-card style="width: 600px;height: 700px;margin: 0 auto">
    <el-form  ref="form" :model="form"  label-width="80px">
      <el-form-item label="交易时间">
          <el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
      <el-form-item label="桌号"><el-input type="text" v-model="form.index"></el-input></el-form-item>
      <el-form-item label="用餐人数"><el-input type="text" v-model="form.diningNum"></el-input></el-form-item>
      <el-form-item label="菜品">

      </el-form-item>
      <el-form-item label="交易金额"></el-form-item>
      <el-form-item>
        <el-button type="success"></el-button>
      </el-form-item>
    </el-form>
  </el-card>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,

        form: {
          index: '',
          date1: '',
        }
      }
    },
   methods:{
    goBack(){
      history.back();//返回上一页面
    },
     handleRemove(file, fileList) {
       console.log(file, fileList);
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
     }
   }
  })
</script>
</html>